การสนับสนุนภาษาสำหรับรูปแบบตัวนับ CSS: การจัดรูปแบบสากลสำหรับผู้ใช้งานทั่วโลก

ในโลกที่เชื่อมต่อกันทั่วโลกในปัจจุบัน นักพัฒนาเว็บจำเป็นต้องสร้างเว็บไซต์และแอปพลิเคชันที่ตอบสนองความต้องการของผู้ใช้งานที่หลากหลาย ซึ่งหมายถึงการพิจารณาไม่เพียงแต่ภาษาเท่านั้น แต่ยังรวมถึงธรรมเนียมทางวัฒนธรรมและระบบตัวเลขที่ใช้ในภูมิภาคต่างๆ รูปแบบตัวนับ CSS มีกลไกที่มีประสิทธิภาพสำหรับการจัดรูปแบบรายการและเนื้อหาที่มีหมายเลขอื่นๆ ในลักษณะที่เคารพความแตกต่างทางวัฒนธรรมเหล่านี้ คู่มือฉบับสมบูรณ์นี้จะสำรวจความสามารถของรูปแบบตัวนับ CSS สำหรับการทำให้เป็นสากล (i18n) และแสดงวิธีการใช้งานอย่างมีประสิทธิภาพ

ทำความเข้าใจรูปแบบตัวนับ CSS

ตัวนับ CSS เป็นตัวแปรที่ดูแลโดยกฎ CSS เพื่อติดตามจำนวนครั้งที่ใช้ ส่วนใหญ่จะใช้เพื่อนับรายการ หัวเรื่อง และองค์ประกอบอื่นๆ รูปแบบตัวนับ CSS ขยายฟังก์ชันการทำงานนี้โดยอนุญาตให้คุณกำหนดระบบตัวเลขที่กำหนดเองนอกเหนือจากเลขอารบิกและเลขโรมันมาตรฐาน ซึ่งมีความสำคัญอย่างยิ่งสำหรับการรองรับภาษาและความชอบทางวัฒนธรรมที่แตกต่างกัน

คุณสมบัติ CSS หลักที่เกี่ยวข้องกับการใช้รูปแบบตัวนับคือ:

• counter-reset: เริ่มต้นหรือรีเซ็ตตัวนับเป็นค่าที่ระบุ
• counter-increment: เพิ่มค่าของตัวนับ
• content: ใช้กับ pseudo-element ::before หรือ ::after เพื่อแสดงค่าของตัวนับ
• counter() หรือ counters(): ฟังก์ชันที่ใช้ภายในคุณสมบัติ content เพื่อจัดรูปแบบค่าของตัวนับ
• @counter-style: กำหนดรูปแบบตัวนับที่กำหนดเองด้วยคุณสมบัติต่างๆ เพื่อควบคุมการจัดรูปแบบ

พลังของ @counter-style

กฎ @counter-style คือหัวใจสำคัญของการทำให้รูปแบบตัวนับ CSS เป็นสากล ซึ่งช่วยให้คุณกำหนดระบบตัวเลขที่กำหนดเองด้วยคุณสมบัติต่างๆ ที่ควบคุมวิธีการแสดงค่าตัวนับ ลองตรวจสอบคุณสมบัติหลักภายในกฎ @counter-style:

• system: ระบุอัลกอริทึมที่ใช้ในการสร้างการแสดงตัวนับ ค่าทั่วไป ได้แก่ cyclic, numeric, alphabetic, symbolic, fixed และ additive
• symbols: กำหนดสัญลักษณ์ที่ใช้โดยรูปแบบตัวนับ เช่น ตัวเลข ตัวอักษร หรืออักขระที่กำหนดเอง
• additive-symbols: ใช้กับระบบ additive เพื่อกำหนดสัญลักษณ์และค่าตัวเลขที่สอดคล้องกัน
• suffix: ระบุข้อความที่ต่อท้ายหลังจากการแสดงตัวนับแต่ละครั้ง (เช่น จุดหรือวงเล็บปิด)
• prefix: ระบุข้อความที่นำหน้าก่อนการแสดงตัวนับแต่ละครั้ง
• range: จำกัดช่วงของค่าที่รูปแบบตัวนับสามารถใช้ได้
• pad: ระบุจำนวนหลักขั้นต่ำที่จะใช้ โดยเติมศูนย์นำหน้าหากจำเป็น
• speak-as: ควบคุมวิธีการประกาศค่าตัวนับโดยโปรแกรมอ่านหน้าจอเพื่อการเข้าถึง
• fallback: ระบุรูปแบบตัวนับสำรองที่จะใช้หากเบราว์เซอร์ไม่รองรับรูปแบบปัจจุบัน

ตัวอย่างการทำให้เป็นสากลด้วย @counter-style

ตอนนี้ มาสำรวจตัวอย่างการใช้งานจริงของ @counter-style เพื่อจัดรูปแบบตัวนับสำหรับภาษาและบริบททางวัฒนธรรมที่แตกต่างกัน

1. เลขอารบิกพร้อมตัวเลขอารบิก-อินดิก

แม้ว่าเลขอารบิก (0-9) จะใช้กันอย่างแพร่หลาย แต่หลายภูมิภาคที่พูดภาษาอารบิกชอบใช้ตัวเลขอารบิก-อินดิก (٠‎-٩‎) เราสามารถสร้างรูปแบบตัวนับเพื่อให้บรรลุเป้าหมายนี้ได้:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

โค้ดนี้กำหนดรูปแบบตัวนับชื่อ arabic-indic ที่ใช้ตัวเลขอารบิก-อินดิกเป็นสัญลักษณ์ คุณสมบัติ suffix จะเพิ่มจุดและช่องว่างหลังแต่ละหมายเลข จากนั้น CSS จะใช้รูปแบบนี้กับรายการเรียงลำดับ (<ol>) เพื่อแสดงตัวเลขในรูปแบบอารบิก-อินดิก

2. เลขโรมัน (ตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก)

เลขโรมันมักใช้ในบริบทต่างๆ และรูปแบบตัวนับ CSS สามารถจัดการได้อย่างง่ายดาย:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

ตัวอย่างนี้สาธิตวิธีการสร้างรูปแบบตัวนับเลขโรมันทั้งตัวพิมพ์ใหญ่ (upper-roman) และตัวพิมพ์เล็ก (lower-roman) จากนั้นคุณสามารถใช้รูปแบบเหล่านี้กับรายการต่างๆ โดยใช้คลาส CSS (.upper-roman และ .lower-roman) ตัวอย่างเช่น:

<ol class="upper-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol class="lower-roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

3. เลขจอร์เจีย

เลขจอร์เจียใช้ระบบตัวอักษรที่ไม่เหมือนใคร เราสามารถกำหนดรูปแบบตัวนับเพื่อแสดงตัวเลขในภาษาจอร์เจียได้:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

ตัวอย่างนี้ใช้ระบบ fixed เนื่องจากระบบตัวเลขจอร์เจียมีชุดสัญลักษณ์ที่จำกัดสำหรับตัวเลข 33 ตัวแรก คุณสมบัติ range จำกัดรูปแบบตัวนับไว้ที่ค่าระหว่าง 1 ถึง 33 สำหรับตัวเลขที่มากกว่า 33 คุณจะต้องใช้ตรรกะที่ซับซ้อนกว่าหรือระบบตัวเลขอื่น

4. เลขอาร์เมเนีย

เช่นเดียวกับจอร์เจีย เลขอาร์เมเนียก็ใช้ตัวอักษรเพื่อแสดงตัวเลขด้วย:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

ตัวอย่างนี้คล้ายกับตัวอย่างจอร์เจีย โดยใช้ระบบ fixed และกำหนดตัวอักษรอาร์เมเนียเป็นสัญลักษณ์ range ถูกตั้งค่าเป็น 1-39 ซึ่งครอบคลุมชุดตัวเลขอาร์เมเนียพื้นฐาน

5. เลข CJK (จีน ญี่ปุ่น เกาหลี)

ตัวเลข CJK มีความซับซ้อนมากกว่า โดยมีรูปแบบที่แตกต่างกันสำหรับบริบทที่เป็นทางการและไม่เป็นทางการ และระดับความละเอียดที่แตกต่างกัน ลองดูภาษาจีนตัวย่อ:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

โปรดทราบว่านี่เป็นการแสดงแบบง่าย การสนับสนุนตัวเลข CJK อย่างเต็มรูปแบบ โดยเฉพาะอย่างยิ่งสำหรับตัวเลขที่มากขึ้น จะต้องมีการใช้งานที่ซับซ้อนกว่าซึ่งเกี่ยวข้องกับระบบ additive และการจัดการค่าตำแหน่ง (หลักสิบ หลักร้อย หลักพัน ฯลฯ) โค้ดนี้สาธิตการแสดงตัวเลขพื้นฐาน

เทคนิคและข้อควรพิจารณาขั้นสูง

1. การรวมรูปแบบตัวนับ

คุณสามารถรวมรูปแบบตัวนับหลายรูปแบบเพื่อสร้างรูปแบบการนับเลขที่ซับซ้อนยิ่งขึ้น ตัวอย่างเช่น คุณอาจใช้ตัวนับหลักสำหรับบทและตัวนับรองสำหรับส่วนต่างๆ ภายในแต่ละบท

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

โค้ดนี้สร้างระบบการนับเลขตามลำดับชั้น โดยที่บทต่างๆ จะถูกกำหนดหมายเลขตามลำดับ และส่วนต่างๆ จะถูกกำหนดหมายเลขภายในแต่ละบท (เช่น 1.1, 1.2, 2.1, 2.2)

2. ข้อควรพิจารณาด้านการเข้าถึง

ตรวจสอบให้แน่ใจว่ารูปแบบตัวนับของคุณสามารถเข้าถึงได้สำหรับผู้ใช้ที่มีความพิการ ใช้คุณสมบัติ speak-as เพื่อควบคุมวิธีการประกาศค่าตัวนับโดยโปรแกรมอ่านหน้าจอ ตัวอย่างเช่น:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

คุณสมบัติ speak-as: numbers; บอกให้โปรแกรมอ่านหน้าจอประกาศค่าตัวนับเป็นตัวเลข ตัวเลือกอื่นๆ ได้แก่ spell-out (สำหรับการสะกดตัวเลข) และ bullets (สำหรับการประกาศตัวนับเป็นจุดนำ)

นอกจากนี้ ให้ระบุข้อความหรือคำอธิบายสำรองสำหรับสัญลักษณ์ที่กำหนดเองที่ใช้ในรูปแบบตัวนับของคุณ เพื่อให้มั่นใจว่าผู้ใช้ที่มีความบกพร่องทางการมองเห็นสามารถเข้าใจความหมายของเนื้อหาที่มีหมายเลขได้

3. ความเข้ากันได้ของเบราว์เซอร์

แม้ว่ารูปแบบตัวนับ CSS จะได้รับการสนับสนุนอย่างกว้างขวางจากเบราว์เซอร์สมัยใหม่ แต่สิ่งสำคัญคือต้องพิจารณาเบราว์เซอร์เวอร์ชันเก่า ใช้คุณสมบัติ fallback เพื่อระบุรูปแบบตัวนับสำรองที่จะใช้หากเบราว์เซอร์ไม่รองรับรูปแบบหลัก ตัวอย่างเช่น:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

ในตัวอย่างนี้ หากเบราว์เซอร์ไม่รองรับระบบ cyclic หรือสัญลักษณ์ที่กำหนดเอง ระบบจะกลับไปใช้รูปแบบรายการ disc

4. ความอ่อนไหวทางวัฒนธรรม

เมื่อใช้รูปแบบตัวนับสำหรับภาษาและวัฒนธรรมที่แตกต่างกัน ให้คำนึงถึงความอ่อนไหวทางวัฒนธรรม ค้นคว้าธรรมเนียมการนับเลขและสัญลักษณ์ที่เหมาะสมที่ใช้ในแต่ละภูมิภาค หลีกเลี่ยงการใช้สัญลักษณ์หรือรูปแบบที่อาจเป็นที่น่ารังเกียจหรือไม่เหมาะสม

ตัวอย่างเช่น บางวัฒนธรรมอาจชอบใช้เครื่องหมายวรรคตอนหรือตัวคั่นที่แตกต่างกันในระบบการนับเลข ตรวจสอบให้แน่ใจว่ารูปแบบตัวนับของคุณเคารพความชอบเหล่านี้

การใช้งานจริงและกรณีการใช้งาน

รูปแบบตัวนับ CSS สามารถใช้ได้ในสถานการณ์การพัฒนาเว็บที่หลากหลาย รวมถึง:

• การสร้างสารบัญ: กำหนดหมายเลขหัวเรื่องและหัวเรื่องย่อยในสารบัญโดยอัตโนมัติ
• การสร้างรายการที่มีหมายเลข: จัดรูปแบบรายการที่มีหมายเลขในภาษาและรูปแบบต่างๆ
• การกำหนดหมายเลขขั้นตอนในบทช่วยสอน: แนะนำผู้ใช้ตลอดชุดขั้นตอนด้วยการกำหนดหมายเลขที่ชัดเจนและดึงดูดสายตา
• การใช้การแบ่งหน้าแบบกำหนดเอง: สร้างการควบคุมการแบ่งหน้าแบบกำหนดเองด้วยรูปแบบการกำหนดหมายเลขที่ไม่ซ้ำใคร
• การแสดงรายการอันดับ: แสดงอันดับในรูปแบบที่ดึงดูดสายตาโดยใช้รูปแบบตัวนับที่แตกต่างกัน
• การสร้างเอกสารทางกฎหมาย: จัดรูปแบบเอกสารทางกฎหมายด้วยข้อกำหนดการกำหนดหมายเลขเฉพาะ
• การจัดรูปแบบเอกสารทางวิทยาศาสตร์: แสดงสมการ รูปภาพ และตารางที่มีหมายเลขที่เหมาะสม

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้รูปแบบตัวนับ CSS

เพื่อให้มั่นใจว่ารูปแบบตัวนับ CSS ของคุณมีประสิทธิภาพและบำรุงรักษาได้ ให้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

• ใช้ชื่อที่สื่อความหมายสำหรับรูปแบบตัวนับของคุณ: เลือกชื่อที่ระบุวัตถุประสงค์และการจัดรูปแบบของรูปแบบอย่างชัดเจน (เช่น arabic-indic, upper-roman, georgian)
• ทำให้รูปแบบตัวนับของคุณเป็นแบบแยกส่วน: กำหนดรูปแบบตัวนับที่แยกต่างหากสำหรับภาษาและระบบการนับเลขที่แตกต่างกัน
• ใช้คลาส CSS เพื่อใช้รูปแบบตัวนับ: หลีกเลี่ยงการใช้รูปแบบตัวนับโดยตรงกับองค์ประกอบ ให้ใช้คลาส CSS เพื่อควบคุมการจัดรูปแบบแทน
• ทดสอบรูปแบบตัวนับของคุณอย่างละเอียด: ทดสอบรูปแบบตัวนับของคุณในเบราว์เซอร์และอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่าแสดงผลอย่างถูกต้อง
• จัดทำเอกสารประกอบสำหรับรูปแบบตัวนับของคุณ: จัดทำเอกสารประกอบที่ชัดเจนสำหรับรูปแบบตัวนับของคุณ รวมถึงวัตถุประสงค์ การจัดรูปแบบ และการใช้งาน
• ให้ความสำคัญกับการเข้าถึง: พิจารณาการเข้าถึงเสมอเมื่อสร้างรูปแบบตัวนับ และใช้คุณสมบัติ speak-as เพื่อให้แน่ใจว่าโปรแกรมอ่านหน้าจอประกาศค่าตัวนับอย่างถูกต้อง

สรุป

รูปแบบตัวนับ CSS มีกลไกที่ทรงพลังและยืดหยุ่นสำหรับการทำให้เป็นสากลในการจัดรูปแบบเนื้อหาที่มีหมายเลขบนเว็บ การใช้ประโยชน์จากกฎ @counter-style และคุณสมบัติต่างๆ คุณสามารถสร้างระบบการนับเลขที่กำหนดเองซึ่งเคารพธรรมเนียมทางวัฒนธรรมและความแตกต่างทางภาษาของภูมิภาคต่างๆ การปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในคู่มือนี้ คุณสามารถมั่นใจได้ว่ารูปแบบตัวนับของคุณมีประสิทธิภาพ บำรุงรักษาได้ และเข้าถึงได้สำหรับผู้ใช้งานทั่วโลก ในขณะที่การพัฒนาเว็บมีการพัฒนาอย่างต่อเนื่อง การทำความเข้าใจและใช้รูปแบบตัวนับ CSS สำหรับการทำให้เป็นสากลจะมีความสำคัญมากขึ้นเรื่อยๆ สำหรับการสร้างประสบการณ์เว็บที่ครอบคลุมและเป็นมิตรกับผู้ใช้อย่างแท้จริง โอบรับพลังของรูปแบบตัวนับ CSS และสร้างเว็บไซต์ที่โดนใจผู้ใช้จากทุกมุมโลก

อ่านเพิ่มเติม

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles